<template>
    <div class="image-preview-container">
        <!-- 图片预览弹窗 -->
        <el-dialog
            v-model="visible"
            :title="title"
            width="80%"
            :close-on-click-modal="true"
            :close-on-press-escape="true"
            @close="handleClose"
            class="image-preview-dialog"
        >
            <div class="image-preview-content">
                <div class="image-container" ref="imageContainer">
                    <img
                        :src="imageUrl"
                        :alt="title"
                        :style="imageStyle"
                        @load="handleImageLoad"
                        @error="handleImageError"
                        ref="previewImage"
                    />
                </div>
                
                <!-- 操作按钮 -->
                <div class="image-controls">
                    <el-button-group>
                        <el-button 
                            type="primary" 
                            size="small" 
                            @click="zoomIn"
                            :disabled="scale >= 3"
                        >
                            <el-icon><ZoomIn /></el-icon>
                            放大
                        </el-button>
                        <el-button 
                            type="primary" 
                            size="small" 
                            @click="zoomOut"
                            :disabled="scale <= 0.5"
                        >
                            <el-icon><ZoomOut /></el-icon>
                            缩小
                        </el-button>
                        <el-button 
                            type="primary" 
                            size="small" 
                            @click="rotate"
                        >
                            <el-icon><Refresh /></el-icon>
                            旋转
                        </el-button>
                        <el-button 
                            type="primary" 
                            size="small" 
                            @click="reset"
                        >
                            <el-icon><RefreshRight /></el-icon>
                            重置
                        </el-button>
                    </el-button-group>
                </div>
                
                <!-- 图片信息 -->
                <div class="image-info" v-if="imageInfo">
                    <p><strong>图片尺寸：</strong>{{ imageInfo.width }} × {{ imageInfo.height }}</p>
                    <p><strong>缩放比例：</strong>{{ (scale * 100).toFixed(0) }}%</p>
                    <p><strong>旋转角度：</strong>{{ rotation }}°</p>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { ElDialog, ElButton, ElButtonGroup, ElIcon } from 'element-plus'
import { ZoomIn, ZoomOut, Refresh, RefreshRight } from '@element-plus/icons-vue'

interface Props {
    modelValue: boolean
    imageUrl: string
    title?: string
}

interface Emits {
    (e: 'update:modelValue', value: boolean): void
}

const props = withDefaults(defineProps<Props>(), {
    title: '图片预览'
})

const emit = defineEmits<Emits>()

// 响应式数据
const visible = ref(props.modelValue)
const scale = ref(1)
const rotation = ref(0)
const imageInfo = ref<{ width: number; height: number } | null>(null)

// 计算属性
const imageStyle = computed(() => ({
    transform: `scale(${scale.value}) rotate(${rotation.value}deg)`,
    transition: 'transform 0.3s ease'
}))

// 监听 modelValue 变化
watch(() => props.modelValue, (newVal) => {
    visible.value = newVal
    if (newVal) {
        reset()
    }
})

// 监听 visible 变化
watch(visible, (newVal) => {
    emit('update:modelValue', newVal)
})

// 方法
const handleClose = () => {
    visible.value = false
    reset()
}

const handleImageLoad = (event: Event) => {
    const img = event.target as HTMLImageElement
    imageInfo.value = {
        width: img.naturalWidth,
        height: img.naturalHeight
    }
}

const handleImageError = () => {
    imageInfo.value = null
}

const zoomIn = () => {
    if (scale.value < 3) {
        scale.value = Math.min(3, scale.value + 0.5)
    }
}

const zoomOut = () => {
    if (scale.value > 0.5) {
        scale.value = Math.max(0.5, scale.value - 0.5)
    }
}

const rotate = () => {
    rotation.value = (rotation.value + 90) % 360
}

const reset = () => {
    scale.value = 1
    rotation.value = 0
}

// 暴露方法给父组件
defineExpose({
    open: () => {
        visible.value = true
        reset()
    },
    close: handleClose,
    zoomIn,
    zoomOut,
    rotate,
    reset
})
</script>

<style lang="less" scoped>
.image-preview-container {
    .image-preview-dialog {
        :deep(.el-dialog__body) {
            padding: 20px;
        }
    }
    
    .image-preview-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
        
        .image-container {
            width: 100%;
            height: 60vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background: #f5f5f5;
            border-radius: 8px;
            overflow: hidden;
            
            img {
                max-width: 100%;
                max-height: 100%;
                object-fit: contain;
                cursor: grab;
                
                &:active {
                    cursor: grabbing;
                }
            }
        }
        
        .image-controls {
            display: flex;
            justify-content: center;
            gap: 10px;
        }
        
        .image-info {
            background: #f8f9fa;
            padding: 15px;
            border-radius: 6px;
            border: 1px solid #e9ecef;
            
            p {
                margin: 5px 0;
                font-size: 14px;
                color: #666;
                
                strong {
                    color: #333;
                }
            }
        }
    }
}
</style> 